
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    
    <style >
    
body,html {
    margin:0; padding:0; background:#a7a09a; color:#000; }
body {
    min-width:1000px; }
#wrap {
    background:#99c; margin:0 auto; width:1000px; }
#header {
    background:#ddd; }
#nav {
    background:#c99; }
#map {
    background:#9c9; }
#sidebar {
    background:#c9c; }
#footer {
    background:#cc9; }
#map {
    background:#9c9; float:left; width:800px; }
#sidebar {
    background:#c9c; float:right; width:200px; }
#footer {
    background:#cc9; clear:both; }
  }

    
#nav ul{
    margin:0; padding:0; list-style:none; }
#nav li{
    display:inline; margin:2px; padding:2px;    
  }

#am, #new{
    text-align:center; display:inline; margin:0; padding:0; color:blue;
    background:#ddd; position:relative; right:5px; border-style:double;
    
}    

#header ul {  
  list-style:none;  
  padding:5px;
  margin:0;
  text-align:center;
  font-size:1em;
}

#header h1 {
    font-size:2em;
    padding:5px;
    margin:0;
    text-align:center;
    }
    
#nav {
    background:#c99; padding:3px; }
#map h2, #main h3, #map p {
    padding:0 10px; }
    
#sidebar ul {
    margin-bottom:0; }
    
#sidebar li{
    margin:2px; padding:2px;    
  }
    
#sidebar h3, #sidebar p {
    padding:0 10px; }
#footer p {
    padding:5px; margin:0; }
#sidebar {
    background:#99c; float:right; width:200px; }
#sidebar h3, #sidebar p {
    padding:0 10px 0 0; }
    
#footer ul{
    margin:0; padding:0; list-style:none; }
#footer li{
    display:inline; margin:2px; padding:2px;
    border-width:thick;
    font-size:1.2em;
    }


    </style>
    
<title></title>
    <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZKWRbzG53z_kSdLESSrIHBQsZRBkCSAaSL5LfZuP1mSq2yZm5hQY2pOOG-Wk9-XeyPVtIIi_M6riNA"
            type="text/javascript"></script>
    <script type="text/javascript">

    var map;    
    var iconBlue;
    var pointIndex=0;
    
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas")); map.addControl(new
        GSmallMapControl()); map.addControl(new GScaleControl());
        map.setCenter(new GLatLng(39.917, 116.397), 12);
        
        iconBlue= new GIcon();
        iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';        
        iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
        
        iconBlue.iconSize = new GSize(12, 20);
        iconBlue.shadowSize = new GSize(22, 20);
        iconBlue.iconAnchor = new GPoint(6, 20);
        iconBlue.infoWindowAnchor = new GPoint(5, 1);
      }      
    }
    
    function addPoint(pointIndex){
       if(!pins[pointIndex]) {
        alert("没有标记被选中！");
        return false;
       }
       
       var action = "create";
       var name = document.getElementById('pointName').value
       var tag = document.getElementById('pointTag').value
       var comment = document.getElementById('pointComment').value
       
       var lat = pins[pointIndex].lat();
       var lon = pins[pointIndex].lng();
       
       //TODO validation
       
       var url = "/point?action="+encodeURIComponent(action)+"&tag="+encodeURIComponent(tag)
        + "&name="+encodeURIComponent(name) + "&comment="+encodeURIComponent(comment)
        +"&lat="+lat +"&lon="+lon
        ;
        
        
       GDownloadUrl(url,  function(data,code){
            if(code==200){
                alert(data);
                if(data=='ok'){
                    map.closeInfoWindow();
                }else{
                    alert("retry!");
                }
            }else{
                alert("failed connecting server");
            }
        })
      
    }

    
    var pins = []
    
    function createMarker(pt,pointIndex){    
    if (window.GMarker) {      
    var options = {
    title: "marker title",
    icon: iconBlue,
    draggable: true,
    bounceGravity: 0.2,
    dragCrossMove: true
    };
    
    
    var x    = new GMarker(pt,options);    
    var html = ''
    html+= ' <table id="pointAddTable" width="200" border="1"> '
    html+= ' <tr> <td>name</td>'
    html+= ' <td><input id="pointName" type="text" name="pointName"/></td></tr>'
    
    html+= ' <tr> <td>tag</td>'
    html+= ' <td><input id="pointTag" type="text" name="pointTag"/></td></tr>'
    
    html+= ' <tr> <td>comment</td> '    
    html+= ' <td><textarea id="pointComment" name="pointComment" cols="20" rows="5">&nbsp;</textarea></td> </tr>'
    
    html+= ' <tr> <td>'
    html += '<input id="pointSave" type="submit" name="save" value="保存"'
    html += 'onclick="addPoint('+ pointIndex+'");return false;"/></td><td><input type="reset" name="clear"/> </td> </tr>'
    html+= ' </table>'
    html+= ''
    
    pins.push(pin);
    pointIndex++;
    
    GEvent.addListener(x, 'click', function() {    
      pin.openInfoWindowHtml(html);
      }
    );
    return x;

    }else{
      alert(" null creating");
    return null;
    }

    }

    
    var gistype;
    var tag;
    var pin;
    
    
    
  
    
    function addMarkers(){
      gistype = "point";
      
      if(pointIndex==0){
        map.clearOverlays();
      }
      
      GEvent.addListener(map,  "click",
                         function(overlay,point){
                            pin = createMarker(point,pointIndex)
                            map.addOverlay(pin);
                         }
                         );
    }
    
    function showLines(){
      gistype = "line";
      map.clearOverlays();
    }

    function showPolygon(){
      gistype = "polygon";
      map.clearOverlays();
    }

    function showDiaries(){
      gistype = "diary";
      map.clearOverlays();
    }

    
    //TODO generate random function name and think about outer js   
    function addTagSave_xxx_12345_htis(){        
        var action = "create";
        var tag = document.getElementById('that_xxx_tagName').value;
        var comment = document.getElementById('that_xxx__hua_fuck_tagComment').value;
        var access = document.getElementById('public_xxx_12345_tag').value;
        
        if(tag==null){
          return false;
        }

        //TODO validate values using regex        
        var url = "/tag?action="+encodeURIComponent(action)+"&tag="+encodeURIComponent(tag)
        + "&comment="+encodeURIComponent(comment)+"&ispublic="+encodeURIComponent(access);
        
        
       GDownloadUrl(url,  function(data,code){
            if(code==200){                
                if(data=='ok'){
                    //alert("ok");
                    map.closeInfoWindow();
                }else{
                    alert(data + "retry?");
                }
            }else{
                alert("failed connecting server");
            }
        })
        
    }
    
    function addTag(tag){
        var html = ''
        html+= ' <table id="pointAddTable" width="200" border="1"> '
        
        html+= ' <tr> <td>tag</td>'
        html+= ' <td><input id="that_xxx_tagName" type="text" name="that_xxx_tagName"/></td></tr>'
        
        html+= ' <tr> <td>comment</td> '
        html+= ' <td><textarea id="that_xxx__hua_fuck_tagComment" name="that_xxx__hua_fuck_tagComment" cols="20" rows="5">&nbsp;</textarea></td> </tr>'
        
        html+= ' <tr> <td>访问级别: </td> '
        html+= ' <td><input type="radio" name="public_xxx_12345_tag" value = "public" checked>公开的标签'
        +'<input type="radio" name="public_xxx_12345_tag" value = "friend" >朋友可见'
        +'<input type="radio" name="public_xxx_12345_tag" value = "family" >家人可见'
        +'<input type="radio" name="public_xxx_12345_tag" value = "private">私人标签</td> </tr>'
        html+= ' <tr> <td><input id="tagSave_xxx_12345_htis" type="submit" name="save" value="保存" onclick="addTagSave_xxx_12345_htis();return false;" /></td><td><input type="reset" name="clear"/> </td> </tr>'
        html+= ' </table>'
        html+= ''    

        map.openInfoWindowHtml(map.getCenter(),  html);
        
    }
    
    var tag;
    function changeNav(id){     
      tag = id;
      
      if(id!='back'){
        tag = id;
        document.getElementById("menu").style.display = "none";
        document.getElementById("back_div").style.display = "inline";
        document.getElementById("title").innerHTML = "Hello, 北京! "+document.getElementById(id).innerHTML;         
        
      }else{
        tag = null;
        document.getElementById("menu").style.display = "inline";
        document.getElementById("back_div").style.display = "none";
        document.getElementById("title").innerHTML = "Hello, 北京!";        
      }
      showMarkers();
    }
    
    function showMarkers(){
      ;
    }
    
    </script>
  </head>
    
    
    
  <body onload="initialize()" onunload="GUnload()">
    
    <div id="wrap">
      
    <div id="header">
      <ul>
        <li id='title'>Hello, 北京! </li>
      </ul>  
    </div>
    
    <div id="nav">
        <ul id="menu">
            <li><a href="#" id="hungry" onclick="changeNav('hungry');return false;">饭店</a></li>
            <li><a href="#" id="sleepy" onclick="changeNav('sleepy');return false;">宾馆</a></li>
            <li><a href="#" id="energetic" onclick="changeNav('energetic');return false;">娱乐场所</a></li>
            <li><a href="#" id="romantic" onclick="changeNav('romantic');return false;">浪漫地</a></li>
            <li><a href="#" id="addTag" onclick="addTag('addTag');return false;">添加标签</a></li>
        </ul>
        
        <ul id="back_div" style="display:none;">
          <li><a href="#" id="back" onclick="changeNav('back');return false;">返回</a></li>                    
        </ul>  
    </div>

    <div id=map>        
    <div id="map_canvas" style="width: 800px; height: 600px;"> </div>
    
    <div>
    </div>
    
    </div>
    
   <div id="sidebar">
        <!-- <h3>Draw</h3> -->
        
        <ul>
            <li>
                <a href="#" onclick="showMarkers();return false;" > 地点</a>
                <a href="#" onclick="addMarkers();return false;" > + </a>
            </li>
            
            <li>
                <a href="#" onclick="showLine();return false;">路线</a>
                <a href="#" onclick="addLine();return false;" > + </a>
            </li>
                
            <li>
                <a href="#" onclick="showPolygon();return false;">  区域</a>
                <a href="#" onclick="addPolygon();return false;" > + </a>
            </li>
        </ul>
        
        <hr/>
        <ul>
          <li><a href="#" onclick="showMore();return false;" > 下一组标记 </a></li>
        </ul>
        <hr/>        
        <ul>
        <li><a href="/">HomePage</a></>
        </ul>
        {% if logout %}
          <hr/><ul> <li> <a href="{{logout}}">Logout</a></li></ul>
          {% else %}
        {% endif %}
              
    </div>
    
    <div id="footer"> 
        <ul>
            <li><a href="#" > rules </a></li>
            <li><a href="#" > help </a></li>
            <li><a href="#" > faq </a></li>
            <li><a href="#" > copy right</a></li>
        </ul>                      
    </div>
            
  </body>
</html>

  
    

